/*
 *
 产品tab
 *productTypes:产品数据源
 *widthArray:列宽度数组
 * itemTitle：表头数组
 * itemTypes：列类型
 * tabWidth:tab列宽度
 *itemHref 行点击跳转路径
 * */
'use strict';
var React = require('react');
var ReTab = require('../../containers/pc/ReTab.jsx');
var ReProcessBar = require('./ReProcessBar.jsx');
var ReBubbleBox = require('../../containers/pc/ReBubbleBox.jsx');
var HomeProductContent = require('./HkfsHomeProductTable/HomeProductContent.jsx');
var ReButton = require('./ReButton.jsx');
var actions = require('../../actions/products');

class HkfsProductDetailTab extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            active: 0
        };
        this.renderTab = this.renderTab.bind(this);
        this.getTabActiveIndex = this.getTabActiveIndex.bind(this);
        this.getAllByParId = this.getAllByParId.bind(this);
    }

    //预留给子函数的钩子函数，用于实时更新当前tab的active值
    getTabActiveIndex(index) {
        this.setState({
            active: index
        });
    }

    //获取当前气泡对话框顶端位置
    getPosition() {
        var width = this.props.tabWidth.replace("px", "");
        return (width * 0.5 + this.state.active * width) + "px";
    }

    //获取父标下所有产品
    getAllByParId(parId, event) {
        let dispatch = this.props.gobalDispatch;
        dispatch(actions.getListByParId(parId, this.props.showAllCallBack));
        event.currentTarget.style.display = 'none';
    }

    getParDetail(parId) {
        location.href = '/productDetail?parId=' + parId
    }

    renderTab() {
        return this.props.productTypes.map((item, i)=> {
            return <div key={"productType"+i} reTabTitle={item.name}>
                <div className="ProductCommonMessage">
                    <span>
                    <span className="MainTitle">年化利率：</span>
                    <span>{item.profit}</span>
                    <span className="MainTitle">发行总额度：</span>
                    <span>{item.financingAmount}</span>
                    <span className="MainTitle">剩余总额度：</span>
                    <span>{item.surplusAmount}</span>
                    <span className="MainTitle">募集进度：</span>
                    <div className="MainProcessBarContainer">
                        <ReProcessBar reClass="MainProductsProcessBar" process={item.process}></ReProcessBar>
                        <div className="MainprocessBarMask">
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                        </span>
                    <ReButton reClass="MainProductButton"
                              reButtonClick={this.getParDetail.bind(this,item.parId)}>查看详情</ReButton>
                </div>

                <ReBubbleBox topPosition={this.getPosition()}>
                    <HomeProductContent buttonText="立即购买" data={item.products} widthArray={this.props.widthArray}
                                        title={this.props.itemTitle} itemTypes={this.props.itemTypes}
                                        itemHref={this.props.itemHref}
                                        showTips={this.props.showTips}
                    ></HomeProductContent>
                    <a className="ProductGetAll" onClick={this.getAllByParId.bind(this,item.parId)}>
                        <div>∨</div>
                        <div>∨</div>
                    </a>
                </ReBubbleBox>
            </div>
        });
    }

    render() {
        return <div className="HkfsProductDetailTabContainer">
            <ReTab reClass="HkfsProductDetailTab" itemWidth={this.props.tabWidth} callParent={this.getTabActiveIndex}>
                {this.renderTab()}
            </ReTab>
        </div>
    }
}

HkfsProductDetailTab.propTypes = {
    productTypes: React.PropTypes.array,
    widthArray: React.PropTypes.array,
    itemTitle: React.PropTypes.array,
    itemTypes: React.PropTypes.array,
    tabWidth: React.PropTypes.string
};

module.exports = HkfsProductDetailTab;